<template>
	<div class="tabs_box" :class="{ card }">
		<slot name="tab">
			<div class="flex">
				<div v-if="options?.length" ref="tabWrapper" class="my_tabs" :style="{ '--indicatorWidth': dynamicIndicatorWidth + 'px' }">
					<template v-for="(item, index) in options" :key="item[prop.value]">
						<div class="tabs_item" v-if="!item.hidden" :key="item[prop.value]" :class="{ active: modelValue === item[prop.value] }" @click="selectTab(item)">
							<a-trigger trigger="contextMenu">
								<div>
									<ComIcon v-if="item[prop.icon]" :icon="item[prop.icon]" style="font-size: 14px;" />
									{{ item[prop.label] }}
								</div>
								<template #content>
									<slot name="menuList" :item="item"></slot>
								</template>
							</a-trigger>
						</div>
					</template>

					<div class="indicator" v-if="options.length && !card" ref="indicator" :style="{ left: `${currentIndexOffset}px`, width: `${dynamicIndicatorWidth}px` }"></div>
					<div class="indicator-card" v-else-if="card" ref="indicator" :style="{ left: `${currentIndexOffset}px`, width: `${dynamicIndicatorWidth}px` }"></div>
				</div>
				<div v-else></div>
				<slot name="next"></slot>
			</div>
		</slot>
		<div class="flex" style="align-items: center">
			<slot></slot>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";

const props = defineProps({
	options: {
		type: Array,
		default: () => []
	},
	modelValue: {
		type: [Number, String]
	},
	card: {
		type: Boolean,
		default: true
	},
	prop: {
		type: Object,
		default: () => {
			return {
				label: "label",
				value: "value",
				icon: "icon"
			};
		}
	}
});

const tabWrapper = ref(null); // 用于存储Tab容器的ref
const indicator = ref(null); // 用于存储指示器的ref

// 计算每个Tab的偏移量
const tabOffsets = computed(() => {
	if (!tabWrapper.value) return [];
	return Array.from(tabWrapper.value.children).map((child) => child.offsetLeft);
});

// 计算指示器的left值，确保居中对齐
const currentIndexOffset = computed(() => {
	const { value } = props.prop;
	const index = props.options.findIndex((i) => i[value] === props.modelValue);
	if (!tabWrapper.value || index === -1 || index >= tabOffsets.value.length) return 0;

	const currentTabWidth = tabWrapper.value.children[index].offsetWidth;
	const tabCenterOffset = currentTabWidth / 2;

	const adjustedCenterOffset = tabCenterOffset - dynamicIndicatorWidth.value / 2;

	return tabOffsets.value[index] + adjustedCenterOffset;
});

// 动态计算指示器的宽度
const dynamicIndicatorWidth = computed(() => {
	if (!tabWrapper.value) return 0;
	const { value } = props.prop;
	const index = props.options.findIndex((i) => i[value] === props.modelValue);
	if (index === -1) return 0;

	return tabWrapper.value.children[index].offsetWidth;
});

const emit = defineEmits(["update:modelValue", "change"]);

// 切换Tab
const selectTab = (item) => {
	const { value } = props.prop;
	emit("update:modelValue", item[value]);
	nextTick(() => {
		emit("change", item[value], item);
	});
};

// 监听 options 变化
watch(
	() => props.options,
	(list) => {
		tabWrapper.value = null;
		if (!Array.isArray(list)) return;
		const data = list.filter((i) => !i.hidden);

		if (!props.modelValue && data.length > 0) {
			selectTab(data[0]);
		}
		const { value } = props.prop;
		const index = data.findIndex((i) => i[value] === props.modelValue);
		if (index === -1 && data.length > 0) {
			selectTab(data[0]);
		}
	},
	{ immediate: true, deep: true }
);

// 在组件挂载后重新计算指示器宽度
onMounted(() => {});
</script>

<style lang="scss" scoped>
.my_tabs {
	display: flex;
	position: relative;
	z-index: 1;
	overflow: hidden;

	.tabs_item {
		// min-width: 80px;
		color: #666666;
		text-align: center;
		margin: 0 14px;
		height: 36px;
		line-height: 36px;
		cursor: pointer;
		position: relative;
		z-index: 3;
		&:hover {
			color: #165dff;
		}
	}

	.active {
		color: #165dff;
	}

	.indicator {
		position: absolute;
		bottom: -1px;
		border-radius: 8px;
		z-index: -1;
		height: 3px; /* 指示器高度 */
		background-color: #165dff; /* 指示器颜色 */
		transition: left 0.3s cubic-bezier(0.37, 0.63, 0.95, 0.98); /* 自定义缓动曲线 */
	}
	.indicator-card {
		position: absolute;
		z-index: 2;
		top: 4px;
		bottom: 4px;
		background-color: #fff;
		border-radius: 2px;
		box-shadow: 0px 0px 1.5px rgba(0, 0, 0, 0.03);
		color: #165dff;
		font-weight: bold;
		transition: left 0.3s cubic-bezier(0.37, 0.63, 0.95, 0.98); /* 自定义缓动曲线 */
	}
}

.tabs_box {
	// padding: 0 10px;
	padding: 0 10px;
	// min-height: 36px;
	position: relative; /* 为绝对定位的指示器提供上下文 */
	border-bottom: 1px solid #f7f8fa;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 1;
}
.card {
	// border-bottom: none;
	padding: 4px 0;
	.my_tabs {
		padding: 3px 4px;
		background-color: #f2f3f5;
		gap: 4px;
		.active {
			color: #165dff;
			// font-weight: bold;
		}
		.tabs_item {
			margin: 0;
			padding: 0 14px;
			height: 26px;
			line-height: 26px;
			&:hover {
				// background-color: #fff;
				border-radius: 2px;
				box-shadow: 0px 0px 1.5px rgba(0, 0, 0, 0.03);
				color: #165dff;
			}
		}
	}
}
</style>
